<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习1：QQ会员页面导航</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body a:link{
            color: white;
            text-decoration: none;
        }
        body a:hover{
            color:blue;
            text-decoration: underline;
        }

        li{
            list-style: none;
            display: inline-block;
            vertical-align: middle;
        }
        ul{
            background: rgba(0,0,0,0.5);
            width: 1500px;
            margin: 0 auto;
        }
        li{
            margin-right: 10px;
        }
        li:first-child{
            margin-right: 50px;
        }
        li:nth-child(8){
            margin-right: 30px;
        }
        .p1{
            border: 1px solid yellow;
            border-radius: 10px;
            text-align: center;
            padding: 0px 10px;
        }
        .p1:hover{
            background-color: yellow;
            color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li><img src="image/logo.png"/></li>
        <li><a href="#">功能特权</a></li>
        <li><a href="#"> 游戏特权</a></li>
        <li><a href="#">生活特权</a></li>
        <li><a href="#">会员活动</a></li>
        <li><a href="#">成长体系</a></li>
        <li><a href="#">年费专区</a></li>
        <li><a href="#">超级会员</a></li>
        <li class="p1"><a href="#">登录</a></li>
        <li class="p1"><a href="#">开通超级会员</a></li>
    </ul>
</body>
</html>